JavaScripti koodi teisendamine: põhjalik juhend Babeli pistikprogrammi arendamiseks

JavaScript on uskumatult mitmekülgne keel, mis on interneti märkimisväärse osa aluseks. Kuid JavaScripti pidev areng, kus uued funktsioonid ja süntaksid ilmuvad sageli, esitab arendajatele väljakutseid. Siin tulevadki mängu koodi teisendamise tööriistad ja eriti Babel. Babel võimaldab arendajatel kasutada uusimaid JavaScripti funktsioone isegi keskkondades, mis neid veel ei toeta. Sisuliselt teisendab Babel kaasaegse JavaScripti koodi versiooniks, mida brauserid ja muud käituskeskkonnad mõistavad. Teadmine, kuidas luua kohandatud Babeli pistikprogramme, annab arendajatele võimaluse seda funktsionaalsust laiendada, optimeerida koodi, jõustada kodeerimisstandardeid ja isegi luua täiesti uusi JavaScripti dialekte. See juhend pakub üksikasjalikku ülevaadet Babeli pistikprogrammide arendamisest, mis sobib igasuguse oskustasemega arendajatele.

Miks Babel? Miks pistikprogrammid?

Babel on JavaScripti kompilaator, mis teisendab kaasaegse JavaScripti koodi (ESNext) tagasiühilduvaks JavaScripti versiooniks (ES5), mida saab käivitada kõikides brauserites. See on oluline tööriist koodi ühilduvuse tagamiseks erinevates brauserites ja keskkondades. Kuid Babeli võimsus ulatub kaugemale lihtsast transpilatsioonist; selle pistikprogrammide süsteem on põhifunktsioon.

• Ühilduvus: Kasutage tipptasemel JavaScripti funktsioone juba täna.
• Koodi optimeerimine: Parandage koodi jõudlust ja suurust.
• Koodistiili jõustamine: Jõustage järjepidevaid kodeerimistavasid meeskondades.
• Kohandatud süntaks: Katsetage ja rakendage oma JavaScripti süntaksit.

Babeli pistikprogrammid võimaldavad arendajatel kohandada koodi teisendamise protsessi. Need töötavad abstraktse süntaksipuuga (AST), mis on JavaScripti koodi struktureeritud esitus. See lähenemine võimaldab peenelt kontrollida, kuidas koodi teisendatakse.

Abstraktse süntaksipuu (AST) mõistmine

AST on teie JavaScripti koodi puulaadne esitus. See jaotab teie koodi väiksemateks ja paremini hallatavateks osadeks, võimaldades Babelil (ja teie pistikprogrammidel) analüüsida ja manipuleerida koodi struktuuriga. AST võimaldab Babelil tuvastada ja teisendada erinevaid keelekonstruktsioone, nagu muutujad, funktsioonid, tsüklid ja palju muud.

Tööriistad nagu AST Explorer on hindamatud, et mõista, kuidas kood on AST-s esindatud. Saate kleepida JavaScripti koodi tööriista ja näha selle vastavat AST struktuuri. See on pistikprogrammide arendamiseks ülioluline, kuna peate seda struktuuri navigeerima ja muutma.

Näiteks vaatleme järgmist JavaScripti koodi:

            const message = 'Hello, World!';
console.log(message);
            

              
                Copy
              
            
          

Selle AST esitus võib välja näha umbes selline (lihtsustatult):

            Program {
  body: [
    VariableDeclaration {
      kind: 'const',
      declarations: [
        VariableDeclarator {
          id: Identifier { name: 'message' },
          init: Literal { value: 'Hello, World!' }
        }
      ]
    },
    ExpressionStatement {
      expression: CallExpression {
        callee: MemberExpression {
          object: Identifier { name: 'console' },
          property: Identifier { name: 'log' }
        },
        arguments: [
          Identifier { name: 'message' }
        ]
      }
    }
  ]
}
            

              
                Copy
              
            
          

Iga sõlm AST-s esindab konkreetset elementi koodis (nt `VariableDeclaration`, `Identifier`, `Literal`). Teie pistikprogramm kasutab seda teavet koodi läbimiseks ja muutmiseks.

Babeli pistikprogrammi arenduskeskkonna seadistamine

Alustamiseks peate seadistama oma arenduskeskkonna. See hõlmab Node.js-i ja npm-i (või yarni) installimist. Seejärel saate luua uue projekti ja installida vajalikud sõltuvused.

1. Looge projekti kaust:

            mkdir babel-plugin-example
cd babel-plugin-example
            

              
                Copy
              
            
          

2. Initialiseerige projekt:

            npm init -y
            

              
                Copy
              
            
          

3. Installige Babeli tuum ja sõltuvused:

            npm install --save-dev @babel/core @babel/types
            

              
                Copy
              
            
          

• @babel/core: Babeli põhikogu.
• @babel/types: Utiliit AST sõlmede loomiseks.

Testimiseks võite installida ka pistikprogramme nagu `@babel/preset-env`. See eelseade aitab teisendada ESNext koodi ES5-ks, kuid pole põhilise pistikprogrammi arendamiseks kohustuslik.

            npm install --save-dev @babel/preset-env
            

              
                Copy
              
            
          

Esimese Babeli pistikprogrammi loomine: lihtne näide

Loome põhilise pistikprogrammi, mis lisab iga faili algusesse kommentaari. See näide demonstreerib Babeli pistikprogrammi põhistruktuuri.

1. Looge pistikprogrammi fail (nt my-babel-plugin.js):

            // my-babel-plugin.js
module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: 'add-comment',
    visitor: {
      Program(path) {
        path.unshiftContainer('body', t.addComment('leading', path.node, 'This code was transformed by my Babel plugin'));
      }
    }
  };
};

            

              
                Copy
              
            
          

• module.exports: See funktsioon saab argumendina Babeli instantsi.
• t (@babel/types): Pakub meetodeid AST sõlmede loomiseks.
• name: Pistikprogrammi nimi (silumiseks ja tuvastamiseks).
• visitor: Objekt, mis sisaldab külastajafunktsioone. Iga võti esindab AST sõlme tüüpi (nt `Program`).
• Program(path): See külastajafunktsioon käivitub, kui Babel kohtab `Program` sõlme (AST juur).
• path.unshiftContainer: Lisab AST sõlme konteineri algusesse (antud juhul `Program` kehasse).
• t.addComment: Loob algusesse lisatava kommentaari sõlme.

2. Testige pistikprogrammi: Looge testfail (nt index.js):

            // index.js
const greeting = 'Hello, Babel!';
console.log(greeting);

            

              
                Copy
              
            
          

3. Konfigureerige Babel (nt kasutades .babelrc.js faili):

            // .babelrc.js
module.exports = {
  plugins: ['./my-babel-plugin.js']
};

            

              
                Copy
              
            
          

4. Käivitage Babel koodi teisendamiseks:

            npx babel index.js -o output.js
            

              
                Copy
              
            
          

See käsk töötleb faili `index.js` teie pistikprogrammiga ja väljastab teisendatud koodi faili `output.js`.

5. Uurige väljundit (output.js):

            // See kood on teisendatud minu Babeli pistikprogrammiga
const greeting = 'Hello, Babel!';
console.log(greeting);

            

              
                Copy
              
            
          

Peaksite nägema, et kommentaar on lisatud teisendatud koodi algusesse.

Sügavam sukeldumine pistikprogrammi struktuuri

Babeli pistikprogrammid kasutavad külastaja mustrit (visitor pattern), et läbida AST ja teisendada koodi. Uurime pistikprogrammi põhikomponente üksikasjalikumalt.

• module.exports(babel): Põhifunktsioon, mis ekspordib pistikprogrammi. See saab Babeli instantsi, andes teile juurdepääsu `types` (t) utiliidile ja teistele Babeli funktsioonidele.
• name: Kirjeldav nimi teie pistikprogrammile. See aitab silumisel ja pistikprogrammi tuvastamisel Babeli konfiguratsioonis.
• visitor: Teie pistikprogrammi süda. See on objekt, mis sisaldab külastajameetodeid erinevatele AST sõlmetüüpidele.
• Külastajameetodid: Iga meetod `visitor` objektis vastab AST sõlme tüübile (nt `Program`, `Identifier`, `CallExpression`). Kui Babel kohtab seda tüüpi sõlme, kutsub ta välja vastava külastajameetodi. Külastajameetod saab `path` objekti, mis esindab praegust sõlme ja pakub meetodeid AST läbimiseks ja manipuleerimiseks.
• path objekt: `path` objekt on pistikprogrammi arendamisel keskne. See pakub hulgaliselt meetodeid AST-s navigeerimiseks ja selle teisendamiseks:

• path.node: Praegune AST sõlm.
• path.parent: Praeguse sõlme vanemsõlm.
• path.traverse(visitor): Läbib rekursiivselt praeguse sõlme lapsi.
• path.replaceWith(newNode): Asendab praeguse sõlme uue sõlmega.
• path.remove(): Eemaldab praeguse sõlme.
• path.insertBefore(newNode): Lisab uue sõlme enne praegust sõlme.
• path.insertAfter(newNode): Lisab uue sõlme pärast praegust sõlme.
• path.findParent(callback): Leiab lähima vanemsõlme, mis vastab tingimusele.
• path.getSibling(key): Saab naabersõlme.

Töötamine @babel/types-iga

Moodul @babel/types pakub utiliite AST sõlmede loomiseks ja manipuleerimiseks. See on ülioluline uue koodi konstrueerimiseks ja olemasolevate koodistruktuuride muutmiseks teie pistikprogrammis. Selle mooduli funktsioonid vastavad erinevatele AST sõlmetüüpidele.

Siin on mõned näited:

• t.identifier(name): Loob identifikaatori sõlme (nt muutuja nimi).
• t.stringLiteral(value): Loob stringiliteraali sõlme.
• t.numericLiteral(value): Loob numbriliteraali sõlme.
• t.callExpression(callee, arguments): Loob funktsioonikutse sõlme (nt funktsiooni kutse).
• t.memberExpression(object, property): Loob liikmeavaldisesõlme (nt `object.property`).
• t.arrowFunctionExpression(params, body): Loob noolefunktsiooni avaldise sõlme.

Näide: Uue muutuja deklaratsiooni loomine:

            const newDeclaration = t.variableDeclaration('const', [
  t.variableDeclarator(
    t.identifier('myNewVariable'),
    t.stringLiteral('Hello, world!')
  )
]);

            

              
                Copy
              
            
          

Praktilised pistikprogrammide näited

Uurime mõningaid praktilisi Babeli pistikprogrammide näiteid, et demonstreerida nende mitmekülgsust. Need näited tutvustavad levinud kasutusjuhtumeid ja pakuvad lähtepunkte teie enda pistikprogrammide arendamiseks.

1. Console logide eemaldamine

See pistikprogramm eemaldab kõik `console.log` avaldised teie koodist. See võib olla tootmisse minevate ehituste puhul äärmiselt kasulik, et vältida silumisinfo kogemata avaldamist.

            // remove-console-logs.js
module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: 'remove-console-logs',
    visitor: {
      CallExpression(path) {
        if (path.node.callee.type === 'MemberExpression' &&
            path.node.callee.object.name === 'console' &&
            path.node.callee.property.name === 'log') {
          path.remove();
        }
      }
    }
  };
};

            

              
                Copy
              
            
          

Selles pistikprogrammis kontrollib `CallExpression` külastaja, kas funktsioonikutse on `console.log` avaldis. Kui on, eemaldab `path.remove()` meetod terve sõlme.

2. Mall-literaalide teisendamine liitmiseks

See pistikprogramm teisendab mall-literaalid (``) stringide liitmiseks, kasutades `+` operaatorit. See on kasulik vanemates JavaScripti keskkondades, mis ei toeta mall-literaale natiivselt (kuigi Babel tegeleb sellega tavaliselt automaatselt).

            // template-literal-to-concat.js
module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: 'template-literal-to-concat',
    visitor: {
      TemplateLiteral(path) {
        const expressions = path.node.expressions;
        const quasis = path.node.quasis;
        let result = t.stringLiteral(quasis[0].value.raw);

        for (let i = 0; i < expressions.length; i++) {
          result = t.binaryExpression(
            '+',
            result,
            expressions[i]
          );
          result = t.binaryExpression(
            '+',
            result,
            t.stringLiteral(quasis[i + 1].value.raw)
          );
        }
        path.replaceWith(result);
      }
    }
  };
};

            

              
                Copy
              
            
          

See pistikprogramm töötleb `TemplateLiteral` sõlmi. See itereerib üle avaldiste ja kvaaside (stringiosade) ning konstrueerib samaväärse liitmise, kasutades `t.binaryExpression`.

3. Autoriõiguse teadete lisamine

See pistikprogramm lisab iga faili algusesse autoriõiguse teate, demonstreerides, kuidas lisada koodi kindlatesse asukohtadesse.

            // add-copyright-notice.js
module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: 'add-copyright-notice',
    visitor: {
      Program(path) {
        path.unshiftContainer('body', t.commentBlock(' Copyright (c) 2024 Your Company '));
      }
    }
  };
};

            

              
                Copy
              
            
          

See näide kasutab `Program` külastajat, et lisada faili algusesse mitmerealine kommentaariblokk.

Täiustatud pistikprogrammide arendamise tehnikad

Lisaks põhitõdedele on olemas ka täiustatud tehnikaid, et oma Babeli pistikprogrammide arendamist edendada.

• Pistikprogrammi valikud: Luba kasutajatel konfigureerida sinu pistikprogrammi valikutega.
• Kontekst: Juurdepääs Babeli kontekstile oleku haldamiseks või asünkroonsete operatsioonide teostamiseks.
• Lähtekoodi kaardid (Source Maps): Genereerige lähtekoodi kaarte, et siduda teisendatud kood tagasi algse lähtekoodiga.
• Vigade käsitlemine: Käsitsege vigu sujuvalt, et pakkuda kasutajatele kasulikku tagasisidet.

1. Pistikprogrammi valikud

Pistikprogrammi valikud võimaldavad kasutajatel kohandada teie pistikprogrammi käitumist. Te määratlete need valikud pistikprogrammi põhifunktsioonis.

            // plugin-with-options.js
module.exports = function(babel, options) {
  const { types: t } = babel;
  const { authorName = 'Unknown Author' } = options;

  return {
    name: 'plugin-with-options',
    visitor: {
      Program(path) {
        path.unshiftContainer('body', t.commentBlock(` Copyright (c) 2024 ${authorName} `));
      }
    }
  };
};

            

              
                Copy
              
            
          

Selles näites aktsepteerib pistikprogramm authorName valikut vaikeväärtusega 'Unknown Author'. Kasutajad konfigureerivad pistikprogrammi Babeli konfiguratsioonifaili (.babelrc.js või babel.config.js) kaudu.

            // .babelrc.js
module.exports = {
  plugins: [[
    './plugin-with-options.js',
    { authorName: 'John Doe' }
  ]]
};

            

              
                Copy
              
            
          

2. Kontekst

Babel pakub konteksti objekti, mis võimaldab teil hallata olekut ja teostada operatsioone, mis püsivad mitme faili teisendamise vältel. See on kasulik näiteks vahemällu salvestamiseks või statistika kogumiseks.

Kontekstile pääseb ligi Babeli instantsi kaudu, tavaliselt siis, kui edastate valikuid pistikprogrammi funktsioonile. `file` objekt sisaldab konteksti, mis on spetsiifiline praegu teisendatavale failile.

            // plugin-with-context.js
module.exports = function(babel, options, dirname) {
  const { types: t } = babel;
  let fileCount = 0;

  return {
    name: 'plugin-with-context',
    pre(file) {
      // Käivitub üks kord faili kohta
      fileCount++;
      console.log(`Transforming file: ${file.opts.filename}`);
    },
    visitor: {
      Program(path) {
        path.unshiftContainer('body', t.commentBlock(` Transformed by plugin (File Count: ${fileCount})`));
      }
    },
    post(file) {
        // Käivitub pärast iga faili
        console.log(`Finished transforming: ${file.opts.filename}`);
    }
  };
};

            

              
                Copy
              
            
          

Ülaltoodud näide demonstreerib pre ja post haake (hooks). Need haagid võimaldavad teil teostada seadistus- ja puhastustoiminguid enne ja pärast faili töötlemist. Failide arvu suurendatakse `pre` osas. Märkus: Kolmas argument, `dirname`, annab kataloogi, kus konfiguratsioonifail asub, mis on kasulik failitoiminguteks.

3. Lähtekoodi kaardid (Source Maps)

Lähtekoodi kaardid on teisendatud koodi silumiseks hädavajalikud. Need võimaldavad teil kaardistada teisendatud koodi tagasi algse lähtekoodiga, muutes silumise palju lihtsamaks. Babel tegeleb lähtekoodi kaartidega automaatselt, kuid teil võib olla vaja neid konfigureerida sõltuvalt teie ehitusprotsessist.

Veenduge, et lähtekoodi kaardid on teie Babeli konfiguratsioonis lubatud (tavaliselt vaikimisi). Kui kasutate koodikogujat (bundler) nagu Webpack või Parcel, tegelevad need tavaliselt lähtekoodi kaartide genereerimise ja integreerimisega.

4. Vigade käsitlemine

Tugev vigade käsitlemine on ülioluline. Pakkuge tähendusrikkaid veateateid, et aidata kasutajatel probleeme mõista ja parandada. Babel pakub meetodeid vigadest teatamiseks.

            // plugin-with-error-handling.js
module.exports = function(babel) {
  const { types: t } = babel;

  return {
    name: 'plugin-with-error-handling',
    visitor: {
      Identifier(path) {
        if (path.node.name === 'invalidVariable') {
          path.traverse({})
          path.buildCodeFrameError('Invalid variable name: invalidVariable').loc.column;
          //throw path.buildCodeFrameError('Vigane muutuja nimi: invalidVariable');
        }
      }
    }
  };
};

            

              
                Copy
              
            
          

Kasutage path.buildCodeFrameError(), et luua veateateid, mis sisaldavad vea asukohta lähtekoodis, muutes nende leidmise ja parandamise kasutaja jaoks lihtsamaks. Vea viskamine peatab teisendusprotsessi ja kuvab vea konsoolis.

Babeli pistikprogrammide testimine

Põhjalik testimine on hädavajalik, et tagada teie pistikprogrammide korrektne töötamine ja et need ei tekitaks ootamatut käitumist. Saate kasutada ühikteste, et kontrollida, kas teie pistikprogramm teisendab koodi ootuspäraselt. Kaaluge erinevate stsenaariumide testimist, sealhulgas kehtivate ja kehtetute sisenditega, et tagada põhjalik katvus.

Saadaval on mitu testimisraamistikku. Jest ja Mocha on populaarsed valikud. Babel pakub utiliitfunktsioone pistikprogrammide testimiseks. Need hõlmavad sageli sisendkoodi võrdlemist oodatava väljundkoodiga pärast teisendamist.

Näide, kasutades Jesti ja @babel/core:

            // plugin-with-jest.test.js
const { transformSync } = require('@babel/core');
const plugin = require('./remove-console-logs');

const code = `
console.log('Hello');
const message = 'World';
console.log(message);
`;

const expected = `
const message = 'World';
`;

test('remove console.log statements', () => {
  const { code: transformedCode } = transformSync(code, {
    plugins: [plugin]
  });
  expect(transformedCode.trim()).toBe(expected.trim());
});

            

              
                Copy
              
            
          

See test kasutab transformSync moodulist @babel/core, et rakendada pistikprogrammi test-sisendstringile, ja seejärel võrdleb teisendatud tulemust oodatava väljundiga.

Babeli pistikprogrammide avaldamine

Kui olete välja töötanud kasuliku Babeli pistikprogrammi, saate selle avaldada npm-is, et seda maailmaga jagada. Avaldamine võimaldab teistel arendajatel teie pistikprogrammi hõlpsasti installida ja kasutada. Veenduge, et pistikprogramm on hästi dokumenteeritud ja järgib pakendamise ja levitamise parimaid tavasid.

1. Looge package.json fail: See sisaldab teavet teie pistikprogrammi kohta (nimi, kirjeldus, versioon jne). Kindlasti lisage märksõnu nagu 'babel-plugin', 'javascript' ja teised, et parandada leitavust.
2. Seadistage GitHubi repositoorium: Hoidke oma pistikprogrammi koodi avalikus või privaatses repositooriumis. See on versioonikontrolli, koostöö ja tulevaste värskenduste jaoks ülioluline.
3. Logige sisse npm-i: Kasutage käsku `npm login`.
4. Avaldage pistikprogramm: Kasutage oma projekti kataloogist käsku `npm publish`.

Parimad tavad ja kaalutlused

• Loetavus ja hooldatavus: Kirjutage puhast, hästi dokumenteeritud koodi. Kasutage järjepidevat koodistiili.
• Jõudlus: Kaaluge oma pistikprogrammi jõudlusmõju, eriti suurte koodibaasidega tegelemisel. Vältige tarbetuid operatsioone.
• Ühilduvus: Veenduge, et teie pistikprogramm ühildub erinevate Babeli versioonide ja JavaScripti keskkondadega.
• Dokumentatsioon: Pakkuge selget ja põhjalikku dokumentatsiooni, sealhulgas näiteid ja konfiguratsioonivalikuid. Hea README-fail on hädavajalik.
• Testimine: Kirjutage põhjalikud testid, et katta kõik oma pistikprogrammi funktsionaalsused ja vältida regressioone.
• Versioonimine: Järgige semantilist versioonimist (SemVer), et hallata oma pistikprogrammi väljalaskeid.
• Kogukonna panus: Olge avatud kogukonna panustele, et aidata oma pistikprogrammi paremaks muuta.
• Turvalisus: Puhastage ja valideerige kõik kasutaja poolt pakutud sisendid, et vältida võimalikke turvaauke.
• Litsents: Lisage litsents (nt MIT, Apache 2.0), et teised saaksid teie pistikprogrammi kasutada ja sellesse panustada.

Kokkuvõte

Babeli pistikprogrammide arendamine avab JavaScripti arendajatele üle maailma tohutu kohandamisvõimaluste maailma. Mõistes AST-d ja saadaolevaid tööriistu, saate luua võimsaid vahendeid oma töövoogude parandamiseks, kodeerimisstandardite jõustamiseks, koodi optimeerimiseks ja uute JavaScripti süntaksite uurimiseks. Selles juhendis toodud näited pakuvad tugeva aluse. Ärge unustage testimist, dokumenteerimist ja parimaid tavasid, kui loote oma pistikprogramme. See teekond algajast eksperdiks on pidev protsess. Pidev õppimine ja katsetamine on Babeli pistikprogrammide arendamise valdamise ja pidevalt arenevasse JavaScripti ökosüsteemi panustamise võti. Alustage katsetamist, uurimist ja ehitamist – teie panusest on kindlasti kasu arendajatele kogu maailmas.